<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
  <title>后台管理系统</title>
  <style>
    .userManage .mainWhitePadding {
      padding: 30px 10% 30px 10%;
    }

    .userManage .mainWhitePadding .el-input {
      width: 290px;
    }

    /*去掉type为number的箭头*/
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    .dataPermissionTable .el-checkbox {
      margin-right: 20px;
      margin-bottom: 5px;
    }

    .dataPermissionTable .el-checkbox + .el-checkbox {
      margin-left: 0;
    }

    .dataPermissionTable thead th {
      text-align: center;
    }
  </style>
</head>
<body>
<div id="userManage" class="userManage mainPadding" style="display: none">
  <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
    <el-breadcrumb-item>Home</el-breadcrumb-item>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row class="mainWhiteBg">
    <div class="inforTitle">新建用户</div>
    <el-row :gutter="20">
      <el-form :model="form" :rules="rules" ref="form" class="mainWhitePadding">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名：" :label-width="formLabelWidth1" prop="name">
              <el-input v-model.trim="form.name" maxlength="30" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录用户名：" :label-width="formLabelWidth1" prop="username">
              <el-input v-model="form.username" maxlength="30" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号：" :label-width="formLabelWidth1" prop="phone">
              <el-input type="number" v-model="form.phone" maxlength="11" autocomplete="off"
                        oninput="if(value.length > 11){value = value.slice(0, 11)
}"
                        @keyup.native="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录密码：" :label-width="formLabelWidth1" prop="password">
              <el-input v-model="form.password" maxlength="30" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属角色：" :label-width="formLabelWidth1" prop="roleName">
              <!-- <el-row>
                  <el-col :span="12">
                      <el-input v-model="form.roleName" autocomplete="off" prop="roleName"></el-input>
                  </el-col>
                  <el-col :span="10">

                  </el-col>
              </el-row> -->
              <el-input v-model="form.roleName" autocomplete="off" prop="roleName"
                        style="width:185px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="openRoleList">选择角色</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属组织：" :label-width="formLabelWidth1" prop="orgName">
              <!-- <el-row>
                  <el-col :span="12">
                      <el-input v-model="form.orgName" autocomplete="off" prop="orgName"></el-input>
                  </el-col>
                  <el-col :span="10">
                      <el-button type="primary" size="small" @click="dialogFormChooseOrg = true">选择组织</el-button>
                  </el-col>
              </el-row> -->
              <el-input v-model="form.orgName" autocomplete="off" prop="orgName"
                        style="width:185px;margin-right: 6px;"></el-input>
              <el-button type="primary" @click="dialogFormChooseOrg = true">选择组织</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="isAuth">
          <p class="fs16 marginB20">设定查看已分发资源数据权限：</p>
          <el-table
              ref="multipleTable"
              tooltip-effect="dark"
              style="width: 100%"
              border
              :data="dataTableCheckbox"
              highlight-current-row
              class="marginB20 dataPermissionTable"
          >
            <el-table-column align="center" width="55" label="序号" type="index"></el-table-column>
            <el-table-column width="200" label="业务线">
              <template slot-scope="{ row, index }">
                <el-checkbox :indeterminate="row.isIndeterminate" v-model="row.checkAll"
                             @change="handleCheckAllChange(row,index)">{{row.name}}
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="本业务线下的可查看资源类别">
              <template slot-scope="{ row, index }">
                <el-checkbox-group v-model="row.checkedCities"
                                   @change="handleCheckedCitiesChange(row,index)">
                  <el-checkbox v-for="item in row.categoryList" :label="item.value"
                               :key="item.value">{{item.label}}
                  </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户状态：" :label-width="formLabelWidth1" prop="status">
              <el-select v-model="form.status" placeholder="请选择" style="width: 100%;">
                <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item class="f-tac">
            <el-button type="primary" :disabled="btnDisabled" @click="onSubmit('form')">提交
            </el-button>
            <el-button @click="goBack()">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
  </el-row>

  <el-dialog title="选择角色" :visible.sync="dialogFormChooseRole">

    <el-col class="marginB20">
        <el-dialog-item label="" class="f-fr">
            <el-button icon="el-icon-search" type="primary" @click="selectRoleList">搜索</el-button>
        </el-dialog-item>
        <el-dialog-item label="角色名称" label-width="formLabelWidth1" class="f-fr" style="width: 200px;margin-right: 10px;">
            <el-input placeholder="输入角色名称" v-model="searchForm.roleName" maxLength="20"></el-input>
        </el-dialog-item>
        
    </el-col>
    
    <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :data="dataTableRole"
        highlight-current-row
        @current-change="handleCurrentChange"
    >
      <el-table-column align="center" width="55" label="选择">
        <template scope="scope">
          <el-radio :label="scope.row.id" v-model="tableRadio"
                    @change="selectRole(scope.row.id,scope.row.roleName)">&nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="roleName" label="角色名称"></el-table-column>
      <el-table-column align="center" prop="description" label="角色描述"></el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog title="选择组织" :visible.sync="dialogFormChooseOrg" append-to-body>
    <el-tree
        :data="dataTree"
        node-key="id"
        :default-expanded-keys="expandedKeys"
        ref="tree"
        highlight-current
        @node-click="clickOrgNode"
        class="leftTree">
    </el-tree>
  </el-dialog>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
  var orgData = [[${orgData}]];
  var dataList = [[${dataList}]];

  var expandedKeys = [];//默认展开节点
  for (var i = 0; i < orgData.length; i++) {
    var curNode = orgData[i];
    expandedKeys.push(curNode.id);
    var childs = curNode.children;
    if (childs) {
      for (var j = 0; j < childs.length; j++) {
        var curChildNode = childs[j];
        expandedKeys.push(curChildNode.id);
      }
    }

  }
  var roleList = [[${roleList}]];//当前字段所属的菜单组

  var addUserVm = new Vue({
    el: '#userManage',
    data: function () {
      return {
        // checkAll: true,
        // checkedCities: ['联展竞价', '优化'],
        // cities: cityOptions,
        // isIndeterminate: false,
        btnDisabled: false,
        tableRadio: '',
        dialogFormChooseRole: false,
        dialogFormChooseOrg: false,
        isAuth: false,
        form: {
          name: '',
          username: '',
          phone: '',
          password: '',
          roleId: '',
          roleName: '',
          orgId: '',
          orgName: '',
          orgBusinessLine: '',
          status: 1

        },
        searchForm: {//搜索form
          roleName: '',
        },
        rules: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'},
            {max: 30, message: '最大30个字符', trigger: 'blur'},
            {
              validator: function (rule, value, callback) {
                if (/^[A-Za-z0-9\u4e00-\u9fa5\d-\s]+$/.test(value) == false) {
                  callback(new Error("请输入汉字、字母或数字"));
                } else {
                  callback();
                }
                callback();
              }, trigger: 'change'
            }
          ],
          username: [
            {required: true, message: '登录用户名不能为空', trigger: 'blur'},
            {max: 30, message: '最大30个字符', trigger: 'blur'},
            {
              validator: function (rule, value, callback) {
                if (/^[A-Za-z0-9]+$/.test(value) == false) {
                  callback(new Error("请输入数字和字母"));
                } else {
                  callback();
                }
                callback();
              }, trigger: 'blur'
            }
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'change'},
            {max: 11, message: '最大11个字符', trigger: 'blur'},
            {
              validator: function (rule, value, callback) {
                if (/^1[3456789]\d{9}$/.test(value) == false) {
                  callback(new Error("手机号输入格式错误，要求11位"));
                } else {
                  callback();
                }
                callback();
              }, trigger: 'blur'
            }
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {max: 30, message: '登录密码输入格式错误，要求6-30位', trigger: 'blur'},
            {min: 6, message: '登录密码输入格式错误，要求6-30位', trigger: 'blur'},
            {
              validator: function (rule, value, callback) {
                if (/^[A-Za-z0-9]+$/.test(value) == false) {
                  callback(new Error("请输入数字和字母"));
                } else {
                  callback();
                }
                callback();
              }, trigger: 'blur'
            }
          ],
          orgName: [
            {required: true, message: '组织不能为空', trigger: 'change'}
          ],
          status: [
            {required: true, message: '状态不能为空', trigger: 'change'}
          ],
          roleName: [
            {required: true, message: '角色不能为空', trigger: 'change'}
          ]
        },
        formLabelWidth: '150px',
        formLabelWidth1: '120px',
        expandedKeys: expandedKeys,//树形结构  默认展开的
        dataTree: orgData,
        dataTableRole: roleList,
        statusOptions: [{
          value: 1,
          label: '启用'
        }, {
          value: 2,
          label: '禁用'
        }, {
          value: 3,
          label: '锁定'
        }],
        dataTableCheckbox: dataList
      }
    },
    methods: {
      //row-click    当某一行被点击时会触发该事件 row, event, column
      showRow(row) {
        //赋值给radio
        this.tableRadio = addUserVm.form.roleId;
      },
      /* urrent-change    当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性    currentRow, oldCurrentRow */
      handleCurrentChange(val, index) {
        this.currentRow = val;
        this.$emit('data', val.pkg);
      },
      getCurrentRow(val) {
        console.log(val)
      },
      //选择角色
      selectRole(id, name) {
        addUserVm.form.roleId = id;
        addUserVm.form.roleName = name;
        addUserVm.dialogFormChooseRole = false;
      },
      //选择机构
      clickOrgNode(data, node, obj) {//点击左侧节点
        addUserVm.form.orgId = data.id;
        addUserVm.form.orgName = data.label;
        var param = {};
        param.id = data.id;
        //根据id获取数据
        axios.post('/organization/organization/queryOrgById', param)
        .then(function (response) {
          var data = response.data;
          if (data.code == '0') {
            var businessLine = data.data.businessLine;
            if (businessLine && businessLine == 127) {
              addUserVm.isAuth = true;
            } else {
              addUserVm.isAuth = false;
            }
          }

        })
        addUserVm.dialogFormChooseOrg = false;
      },
      //返回
      goBack() {//点击左侧节点
        document.location.href = '/user/userManager/initUserList';
      },
      onSubmit(formName) {
        debugger
        //  console.info(this.dataTableCheckbox);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var formData = addUserVm.form;
            var param = {};
            param.name = formData.name;
            param.username = formData.username;
            param.password = formData.password;
            param.phone = formData.phone;
            param.status = formData.status;
            param.orgId = formData.orgId;
            if (this.isAuth) {
              var list = [];
              var dataTableCheckbox = this.dataTableCheckbox;
              for (i = 0; i < dataTableCheckbox.length; i++) {
                if (dataTableCheckbox[i].checkedCities.length != 0) {
                  var userDataAuth = {};
                  userDataAuth.businessLine = dataTableCheckbox[i].value;
                  userDataAuth.dicCode = dataTableCheckbox[i].dicCode;
                  userDataAuth.dicValue = dataTableCheckbox[i].checkedCities.join(',');
                  list.push(userDataAuth);
                }
              }
              param.userDataAuthList = list;
            }
            //  console.info(param);
            var roleList = new Array();
            roleList.push(formData.roleId);
            param.roleList = roleList;

            addUserVm.btnDisabled = true;
            axios.post("/user/userManager/saveUser", param)
            .then(function (response) {
              console.info(response);
              var data = response.data;
              if (data.code != "0") {
                addUserVm.$message(data.msg);
                addUserVm.btnDisabled = false;
              } else {
                addUserVm.$message('新增成功');
                addUserVm.btnDisabled = false;
                document.location.href = '/user/userManager/initUserList';
              }
            })
            .catch(function (error) {
              addUserVm.btnDisabled = false;
              console.log(error);
            });

          } else {
            console.log('数据未通过校验！');
            return false;
          }
        });
      },
      number() {
        this.form.phone = this.form.phone.replace(/[^\.\d]/g, '');
        this.form.phone = this.form.phone.replace('.', '');
      },
      simpleClone(data) {
        return JSON.parse(JSON.stringify(data));
      },
      handleCheckAllChange(item, index) {
        var tabledata = item.categoryList;
        var tabledata1 = []
        for (i = 0; i < tabledata.length; i++) {
          tabledata1.push(tabledata[i].value)
        }
        if (item.checkAll) {
          item.checkedCities = this.simpleClone(tabledata1);
        } else {
          item.checkedCities = [];
        }
        item.isIndeterminate = false;
      },
      handleCheckedCitiesChange(item, index) {
        var tabledata = item.categoryList;
        var tabledata1 = []
        for (i = 0; i < tabledata.length; i++) {
          tabledata1.push(tabledata[i].value)
        }
        var checkedCount = item.checkedCities.length;
        item.checkAll = checkedCount === tabledata1.length;
        item.isIndeterminate = (checkedCount > 0) && (checkedCount < tabledata1.length);
      },
      selectRoleList() {
        var param = this.searchForm;
        axios.post('/role/roleManager/queryRoleList', param)
        .then(function (response) {
          var data = response.data
          if (data.code == '0') {
            var roleList = data.data;
            addUserVm.dataTableRole = roleList;
            addUserVm.searchForm.roleName = "";
          } else {
            addUserVm.$message({message: '查询角色列表错误', type: 'error'});
            console.error(data);
          }

        })
        .catch(function (error) {
          console.log(error);
        }).then(function () {
        });
      },
      openRoleList() {
        //每次打开重新赋值
        addUserVm.dataTableRole = roleList;
        addUserVm.dialogFormChooseRole = true;
      },
    },
    mounted() {
      document.getElementById('userManage').style.display = 'block';
    }
  })
</script>
</html>